$radius: 10px;

.popup {
  .overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    transition-timing-function: ease-out;
  }

  .panel {
    width: 100%;
    position: fixed;
    z-index: 9001;

    &.popup-panel--center {
      width: 80%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: $radius;
      transition-timing-function: cubic-bezier(1, 0, 0, 1);
    }

    &.popup-panel--top {
      top: 0;
      left: 0;
      right: 0;
      border-radius: 0 0 $radius $radius;
    }

    &.popup-panel--bottom {
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: $radius $radius 0 0;
    }

    &.popup-panel--left {
      width: 200px;
      height: 100% !important;
      top: 0;
      left: 0;
    }

    &.popup-panel--right {
      width: 200px;
      height: 100% !important;
      top: 0;
      right: 0;
    }
  }
}